<template>
	<el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
		v-loading="isLoading" class="min-h-[274px]">
		<el-row :gutter="30">
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.topoName' prop='topoName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.topoName' clearable :placeholder='prompt?.topoName' />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.remark' prop='remark'>
					<el-input :maxlength="100" :show-word-limit="true" v-model='formInline.remark' :autosize="{ minRows: 4 }" type="textarea" clearable
						:placeholder='prompt?.remark' />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/operate/project-management/configuration-management/index';
import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
const operateInfo = ref(usePageVariablesStoreHook().getOperate())
type FormProps = {
	formInline: infoType,
	isLoading: boolean,
	projectName: string
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
	projectName: ''
});

const formRules = reactive(<FormRules>{
	id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
	topoName: [{ required: true, message: prompt?.topoName, trigger: 'blur' },],
	topoData: [{ required: true, message: prompt?.topoData, trigger: 'blur' },],
	updatedBy: [{ required: true, message: prompt?.updatedBy, trigger: 'blur' },],
	updatedAt: [{ required: true, message: prompt?.updatedAt, trigger: 'blur' },],
	// remark: [{ required: true, message: prompt?.remark, trigger: 'blur' },],
});
const ruleFormRef = ref();
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
